
<h2>Création d'un groupe à thème</h2>

<?php
echo $this->Form->create('TopicsGroup', array(
        'onSubmit' => "recup()"
        ));
echo $this->Form->input('name');
/*
echo $this->Form->input('description', array(
    'type' => 'textarea'
));
*/
?>
    <div>
            <label for="tag">Veuillez ajoutez 3 tag pour décrire le groupe</label>
            <input type="text" name="tag" id="tag" style="width:200px" onKeyPress="AutoCompletion()"/>
            <input type="button" value="Add" id="add" style="width:100px" onclick="addtag()"/>
            <input type="button" value="Delete" id="del" style="width:100px"  onclick="deltag()"/>            
            <input type="button" value="Delete All" id="dall" style="width:150px" onclick="dalltag()"/>
            <p></p>
            <p> Liste des tags choisis : </p>
            <ul id="list_tags" style="list-style-type: none;">
            </ul>
    </div>

      <style>
          li.selected { color:blue; }
      </style>
<!-- .attr("disabled", "disabled");
.removeAttr("disabled"); -->

    <script type="text/javascript">
        function AutoCompletion(){
            //proposition des tags déja existant commencant par ce qu'écrit l'utilisateur
        }       
        function addtag() {
            var tag = $("#tag").val();
            var li = $('<li class="tagX"></li>');
            li.append(tag);
            $("#list_tags").append(li);
            $("#tag").val("");
            $("li").toggle(
                function(){
                    $(this).addClass("selected");
                },
                function (){
                    $(this).removeClass("selected");
                });
        }           
        function deltag(){
            $(".selected").remove();
        }    
        function dalltag() {
            $("#list_tags").html("");
        }
        
        function recup(){
            var i = 0;
            $(".tagX").each(function(){
                i++;
                $('#TopicsGroupCreateForm').append($('<input name="tag'+i+'" type="hidden" value="'+$(this).text()+'" />'));
            });
        }
    </script>
<?php  
    echo $this->Form->end('Valider'); 
?>

    